import {messages} from "share/common";
import React from 'react';
import {Select, Icon, Popover, message} from 'antd'

import ListSearcher from 'components/list-searcher'
import 'styles/components/chooser.scss'

import searcherData from 'share/searcherData'

/**
 * 列表选择表单组件，由antd的select组件改造而来,select + listSearcher的自定义表单组件
 *
 * 2018/11/26 ZaraNengap
 * 一开始我觉得这个组件还凑活
 * 但是在别人对他进行大范围的改动之后
 * 我对这个组件失去了兴趣
 * 现在我不是作者了，有问题去找最后一个改动他的人
 *
 */
class Searcher extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      value: [],
      showListSearcher: false,
      listSelectedData: []
    };
  }

  componentWillMount(){
    this.setValue(this.props.value);
  }

  setValue = (valueWillSet) => {
    const { searcherItem, type } = this.props;
    let key = searcherItem ? searcherItem.key : searcherData[type].key;
    if(valueWillSet &&
      typeof valueWillSet !== 'string' && //onlyNeed模式下返回的single值
      !(valueWillSet.splice && valueWillSet.length > 0 && typeof valueWillSet[0] === 'string')  //onlyNeed模式下返回的只有需要值数组
    ){
      let lengthChange = valueWillSet.length !== this.state.value.length;
      let innerChange = false;
      if(valueWillSet.length === this.state.value.length){
        valueWillSet.map((nextItem, index) => {
          innerChange = innerChange || this.state.value[index].key !== (nextItem[key] + '');
        })
      }
      if(lengthChange || innerChange){
        let values = [];
        valueWillSet.map(item => {
          values.push({
            key: item[key],
            label: item[this.props.labelKey],
            value: item
          })
        });
        this.setState({ value: values });
        // this.onChange(valueWillSet);
      }
    }
    if((!valueWillSet && this.state.value.length > 0) || (valueWillSet && valueWillSet.length === 0 && this.state.value.length > 0)){
      this.setState({ value: [] })
    }
  };

  /**
   * value为传入值
   * @param nextProps
   */
  componentWillReceiveProps = (nextProps) => {
    this.setValue(nextProps.value)
  };

  /**
   * list控件因为select没有onClick事件，所以用onFocus代替
   * 每次focus后，用一个隐藏的input来取消聚焦
   */
  handleFocus = () => {
    this.refs.searcherBlur.focus();
    if (this.props.type === 'proxy_form_admin') {
      if (!this.props.listExtraParams.principalOID) {
        message.warning('请先选择授权人');
      } else {  
        this.showList()
      }
    } else if (this.props.type === 'car_by_user') {
      if (!this.props.listExtraParams.employeeID) {
        message.warning('请先选择授权人');
      } else {  
        this.showList()
      }
    } else {
      this.showList()
    }
  };

  /**
   * 显示ListSearcher，如果有已经选择的值则包装为ListSearcher需要的默认值格式传入
   */
  showList = () => {
    let listSelectedData = [];
    if(this.state.value.length > 0){
      this.state.value.map(value => {
        listSelectedData.push(value.value)
      });
    }
    this.setState({ listSelectedData }, () => {
      this.setState({  showListSearcher: true })
    })
  };

  handleListCancel = () => {
    this.setState({ showListSearcher: false })
  };

  /**
   * ListSearcher确认点击事件，返回的结果包装为form需要的格式
   * @param result
   */
  handleListOk = (result) => {
    let value = [];
    const { type, searcherItem } = this.props;
    let key = searcherItem ? searcherItem.key : searcherData[type].key;
    result.result.map(item => {
      value.push({
        key: item[key],
        label: item[this.props.labelKey],
        value: item
      })
    });
    //手动调用onChange事件以与父级Form绑定
    this.onChange(result.result);
    this.setState({ showListSearcher: false, value });
  };

  clear = () => {
    this.onChange([]);
    this.setState({ value: [] })
  };

  onChange = (changedValue) => {
    const { onlyNeed, onChange, single, type } = this.props;
    console.log('changedValue', changedValue)
    if (onChange) {
      if(onlyNeed && changedValue){
        if(single) {
          if (type === 'car_by_user') {
            let result = [];
            changedValue.map(item => {
              result.push({
                id: item.id,
                carNumber: item.carNumber
              })
              // result.push(item[onlyNeed])
            });
            onChange(result ? result : null,result);
          } else {
            onChange(changedValue[0] ? changedValue[0][onlyNeed] : null,changedValue[0]);
          }
        }
        else{
          if (type === 'proxy_form_admin') {
            let result = [];
            changedValue.map(item => {
              result.push({
                formName: item.formName,
                formOID: item.formOID
              })
              // result.push(item[onlyNeed])
            });
            onChange(result)
          } else {
            let result = [];
            changedValue.map(item => {
              result.push(item[onlyNeed])
            });
            onChange(result)
          }
        }
      }
      else{
        onChange(changedValue);
      }
    }
  };

  render() {
    const { showListSearcher, listSelectedData, value } = this.state;
    const { placeholder, disabled, searcherItem, type, listExtraParams, single, showNumber,
      newline, maxNum, labelKey, showClear, descriptionKey, method, searchPlaceHolder, showDetail, isNeedToPage,
      isShowSelectAll, isAll, popoverParams } = this.props;
    let popVisible = showNumber || !value.length ? {visible: false} : {};
    return (
      <div className={`chooser ${showNumber && 'number-only'} ${disabled && 'chooser-disabled'} ${newline && 'newline'}`}>
        <Popover
          placement="topLeft"
          content={value.map(v => v.label).join("，")}
          {...popVisible}
          {...popoverParams}
        >
          <Select
            value={value}
            mode="multiple"
            labelInValue
            placeholder={placeholder}
            onFocus={this.handleFocus}
            dropdownStyle={{ display: 'none' }}
            disabled={disabled}
            style={{ width: '100%' }}
          />
          {value.length && !newline ? (
            <div className={`fake-value-list ${disabled ? 'disabled' : ''}`} onClick={disabled ? () => {} : this.handleFocus}>
              {value.map(v => v.label).join("，")}
            </div>) : ''
          }
        </Popover>
        {/*如果禁用了，就不要后面的清除icon*/}
        {
          (disabled || !showClear) ? "" : <Icon className="ant-select-selection__clear" type="close-circle" onClick={this.clear} style={value.length === 0 ? {opacity: 0} : {}}/>
        }
        <div className="chooser-number" onClick={() => { !this.props.disabled && this.showList() }}>
          {isAll ? messages('components.key912')/*已选择全部*/ : messages("common.total.selected" , { total: value.length === 0 ? '0' : value.length })}
          {/*已选择 {value.length} 条*/}
        </div>
        <ListSearcher
          visible={showListSearcher}
          type={type}
          onCancel={this.handleListCancel}
          onOk={this.handleListOk}
          selectedData={listSelectedData}
          extraParams={listExtraParams}
          searcherItem={searcherItem}
          single={single}
          maxNum={maxNum}
          labelKey={labelKey}
          showDetail={showDetail}
          descriptionKey={descriptionKey}
          searchPlaceHolder={searchPlaceHolder}
          isNeedToPage={isNeedToPage}
          isShowSelectAll={isShowSelectAll}
          method={method}
        />
        <div>
          <input
            ref="searcherBlur"
            style={{opacity: 0, position: 'fixed', width: 0, height: 0, zIndex: -1 }}
          />
        </div>
      </div>
    );
  }
}

Searcher.propTypes = {
  placeholder: React.PropTypes.string,  //输入框空白时的显示文字
  disabled: React.PropTypes.bool,  //是否可用
  type: React.PropTypes.string,  //list选择的type，参见chooserData内
  searcherItem: React.PropTypes.object,  //listSearcher的searcherItem
  labelKey:React.PropTypes.oneOfType([React.PropTypes.array, React.PropTypes.string]),  //表单项的显示变量名
  listExtraParams: React.PropTypes.object,  //listSearcher的额外参数
  single: React.PropTypes.bool,  //是否单选
  onChange: React.PropTypes.func,  //进行选择后的回调
  value: React.PropTypes.oneOfType([React.PropTypes.array, React.PropTypes.string]),  //已选择的值，需要传入完整目标数组
  showNumber: React.PropTypes.bool,  //是否只显示'已选XX条'
  onlyNeed: React.PropTypes.any,  //只需要对象内的某一值的对应变量名
  newline: React.PropTypes.bool,  //内容是否可换行
  maxNum: React.PropTypes.number,  //最多选择多少条数据
  method: React.PropTypes.string,  //调用方法get/post
  showClear: React.PropTypes.bool, //是否显示clear
  descriptionKey: React.PropTypes.any,  //listSearcher的descriptionKey
  showDetail: React.PropTypes.bool,  //是否在界面显示已选项
  searchPlaceHolder: React.PropTypes.string, //listSearcher的searchPlaceHolder
  isNeedToPage: React.PropTypes.bool,  //是否摇滚分页
  isShowSelectAll: React.PropTypes.bool, //是否展示全选当前
  isAll: React.PropTypes.bool, //是否是增量的全选，存的是全选关系，不是具体的选择项，用来控制disabled下的提示语
  popoverParams: React.PropTypes.object// popover相关参数
};

Searcher.defaultProps = {
  placeholder: messages("common.please.select"),
  disabled: false,
  listExtraParams: {},
  single: false,
  showNumber: false,
  newline: false,
  method: 'get',
  showClear: true,
  showDetail: false,
  isNeedToPage: false,
  isShowSelectAll: false,
  isAll: false,
  popoverParams: {}
};

export default Searcher;
